<template lang="pug">
data-page(
  v-bind="pageParams"
)
  el-checkbox-group(v-model="checkedCities" @change="handleCheckedCitiesChange")
    el-checkbox(v-for="city in cities" :key="city" :label="city" :value="city") 
  mt-table(
    v-bind="tableProps"
  )
</template>

<script setup lang="ts">
import {
  type FormItemProps,
  type DataPageProps,
  type TableProps,
} from "@scmt/common-components";
import { useApi } from "@scmt/core-api";
import {
  type SpecimenEntity,
  type SpecimenQueryParams,
} from "@scmt/api-lis-specimen";
import { ESpeimenTableColumnKey, specimenColumns } from "@scmt/api-common";
import { useRequest } from "@scmt/common-hooks";

const props = defineProps({
  deviceId: {
    type: String,
    default: "",
  },
});
const emits = defineEmits<{
  select: [SpecimenEntity];
  refreshData: [SpecimenEntity[]];
}>();

const $api = useApi();
const queryPramas = reactive<SpecimenQueryParams>({
  inspectionStartDate: "",
  inspectionEndDate: "",
  get _tempDate() {
    return [this.inspectionStartDate, this.inspectionEndDate];
  },
  set _tempDate(val) {
    [this.inspectionStartDate, this.inspectionEndDate] = val || ["", ""];
  },
  deviceId: "",
  states: 0,
  pageNum: 1,
  pageSize: 20,
});
const checkedCities = ref([]);
const cities = ["门诊", "住院", "已打印", "未审核"];

const { deviceId } = toRefs(props);

const { request, data, loadingMap } = useRequest(
  {
    tableData: async (q: any) => {
      if (!deviceId.value)
        return {
          items: [],
          pagination: {
            total: 0,
            pageNum: queryPramas.pageNum,
            pageSize: queryPramas.pageSize,
          },
        };

      const { _tempDate, ...params } = Object.assign({}, queryPramas, q, {
        deviceId: deviceId.value,
      });
      return $api.lis.specimen.getSpecimenPageList(params).then((res) => {
        Object.assign(queryPramas, res.pagination);
        emits("refreshData", res.items);
        return res;
      });
    },
    patientType: () => $api.dict.item.listAsOptions("patient-type"),
  },
  {
    tableData: {
      items: [] as SpecimenEntity[],
      pagination: {
        total: 0,
        pageNum: queryPramas.pageNum,
        pageSize: queryPramas.pageSize,
      },
    },
  }
);

const { tableData } = toRefs(data);

const queryFields: FormItemProps[] = [
  {
    prop: "barcode",
    label: "标本条码",
  },
  {
    prop: "patientName",
    label: "患者姓名",
  },
  {
    prop: "inspectionTime",
    label: "检验时间",
    as: "date",
    options: {
      type: "daterange",
    },
  },
];

const pageParams = computed<DataPageProps>(() => {
  const dataPageProps: DataPageProps = {
    loading: loadingMap.tableData,
    queryModel: queryPramas,
    queryFields,
    onQuery: getData,
    columns: 2,
    flex: true,
  };

  return dataPageProps;
});

const tableColumns: TableProps["columns"] = [
  specimenColumns[ESpeimenTableColumnKey.State],
  specimenColumns[ESpeimenTableColumnKey.Barcode],
  {
    prop: "applicationProject",
    tooltip: true,
    label: "检查项目",
    minWidth: "180px",
  },
  specimenColumns[ESpeimenTableColumnKey.PatientName],
  specimenColumns[ESpeimenTableColumnKey.Age],
  specimenColumns[ESpeimenTableColumnKey.Sex],
  specimenColumns[ESpeimenTableColumnKey.OutpatientNumber],
  specimenColumns[ESpeimenTableColumnKey.BillingDoctor],
  {
    prop: "inspectionTime",
    label: "检验时间",
    tooltip: true,
    minWidth: "180px",
    format: "datetime",
  },
];
const tableProps = computed(() => {
  const tableProps: TableProps = {
    loading: loadingMap.tableData,
    data: tableData.value?.items,
    pagination: tableData.value?.pagination,
    insertIndex: false,
    columns: tableColumns,
    onPaginate: getData,
    onRowDblclick: (row: any) => {
      emits("select", row);
    },
    highlightCurrentRow: true,
  };
  return tableProps;
});

watch(
  deviceId,
  () => {
    getData();
  },
  {
    immediate: true,
  }
);

onMounted(() => {
  request("patientType");
});

//TODO 整个这个逻辑有问题需要重新调整
const handleCheckedCitiesChange = (event: Array<string>) => {
  let patientType = "";
  let state;
  if (event.includes("门诊") && event.includes("住院")) {
    patientType = "门诊,住院";
  } else if (event.includes("已打印")) {
    state = 10;
  } else if (event.includes("门诊")) {
    patientType = "门诊";
  } else if (event.includes("住院")) {
    patientType = "住院";
  } else if (event.includes("未审核")) {
    state = 8;
  }
  request("tableData", {
    patientType: patientType,
    state: state,
    deviceId: props.deviceId,
  });
};

function getData(q?: any) {
  request("tableData", q);
}

defineExpose({
  getData,
});
</script>

<style lang="less" scoped></style>
